<template>
  <div class="home">
    <div class="home_wrapper">
      <div class="home_left_container">
        <LeftItem v-for="(item,index) in categoryItems"
        :key="index"
        :item="item"
        :selectIndex="selectIndex"
        :index="index"
        v-on:changeSelectindex="changeSelectindex"/>
      </div>
      <div class="home_right_container" 
      ref="right"
      @touchstart="onMouseEnter">
        <!-- <div class="home_right_wrapper">
          <div v-for="(item,index) in subCategoryItems"
          :key="index"
          class="home_right_item_container">
            <div>
              <img :src="item.scpic"/>
            </div>
            <div>{{item.subcname}}</div>
          </div> -->
          <div class="home_right_block_container"
          v-for="(item,index) in categoryItems"
          :key="index"
          ref="block">
          <div>
            <div>
              <div class="home_right_block_header">{{item.cname}}</div>
            </div>
             <div class="home_right_block_container">
               <div v-for="(subItem,subIndex) in item.subcategories"
            :key="subIndex"
            class="home_right_item_container">
              <div>
                <img :src="subItem.scpic"/>
              </div>
              <div>{{subItem.subcname}}</div>
            </div> 
             </div>
          </div>
          </div>
        <!-- </div> -->
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import LeftItem from "../components/LeftItem"

export default {
  name: 'Home',
  components: {
    LeftItem
  },
  computed:{
    categoryItems:function(){
      return this.$store.state.category
    },
    // subCategoryItems:function(){
    //   return this.$store.state.subCategoryItems
    // },
    selectIndex:function(){
      return this.$store.state.selectIndex
    }
  },
  methods:{
    changeSelectindex(){
      // window.console.log(this.$refs.block)
      var divElement = this.$refs.block[this.selectIndex];
      divElement.scrollIntoView({behavior:'smooth'});
      this.$refs.right.removeEventListener("scroll",this.onScroll,false)
    },
    onScroll(){
      // window.console.log(event);
      //获取右侧滚动的距离
      var scrollOffset = event.target.scrollTop;
      window.console.log(scrollOffset);

      //获取右侧所有 块
      var rightElements = this.$refs.block;
      for(let index = 0;index < rightElements.length;index++){
        var currentElement = rightElements[index];
        var nextElement = rightElements[index+1];
        if(scrollOffset>currentElement.offsetTop &&scrollOffset<nextElement.offsetTop){
          this.$store.dispatch("CHANGE_SELECT_STATUS",index);
        }
      }
    },
    onMouseEnter(){
      window.console.log("11111111")
      this.$refs.right.addEventListener("scroll",this.onScroll);
    }
  },
  mounted(){
    this.$store.dispatch("GET_CATEGORY_DATA");
    this.$refs.right.addEventListener("scroll",this.onScroll);
  }
}
</script>

<style scoped>
.home_wrapper
{
  width: 100%;
  height: 667px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.home_left_container
{
  width: 30%;
  height: 100%;
  /* border: 1px solid  red; */
  overflow: scroll;
}

.home_right_container
{
  width: 70%;
  height: 100%;
  /* border: 1px solid  black; */
  overflow: scroll;
  
}

.home_right_wrapper
{
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.home_right_item_container
{
  width: 45%;
  height: 120px;
  border: 1px solid red;
}

.home_right_item_container img
{
  width: 100px;
}

.home_right_block_container
{
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* height: 200px; */
  border: 1px solid blue;
}

.home_right_block_header
{
  width: 100%;
  height: 40px;
}

</style>
